import {
  LockOutlined,
  UserOutlined,
} from '@ant-design/icons';
import {
  LoginForm,
  ProConfigProvider,
  ProFormText,

} from '@ant-design/pro-components';
import {  theme } from 'antd';
import { UserService } from '@/services/user';
import { useNavigate } from '@umijs/max';


export default () => {
  const { token } = theme.useToken();

  const Navigate = useNavigate();
  return (
    <ProConfigProvider hashed={false}>
      <div style={{ backgroundColor: token.colorBgContainer }}>
        <LoginForm
          onFinish={async (value: API.User_Login) => {
            try {
              const data = await UserService.login(value);
              sessionStorage.setItem('token', data);
              Navigate('/home', { replace: true });
            } catch (error) {
              console.error('登录失败:', error);
            } 
          }}
          // logo="http://wapbaike.baidu.com/tashuo/browse/content?id=ec9f5e1cf26ad6a4d5d74aef&fromModule=articleMoreRecommend"
          title="智慧云平台"
          style={{
            margin: '30px 0',
          }}
        >
          <>
            <ProFormText
              name="user_name"
              fieldProps={{
                size: 'large',
                prefix: <UserOutlined className={'prefixIcon'} />,
              }}
              placeholder={'用户名: admin or user'}
              rules={[
                {
                  required: true,
                  message: '请输入用户名!',
                },
              ]}
            />
            <ProFormText.Password
              name="user_pwd"
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined className={'prefixIcon'} />,
                strengthText:
                  'Password should contain numbers, letters and special characters, at least 8 characters long.',
                statusRender: (value) => {
                  const getStatus = () => {
                    if (value && value.length > 12) {
                      return 'ok';
                    }
                    if (value && value.length > 6) {
                      return 'pass';
                    }
                    return 'poor';
                  };
                  const status = getStatus();
                  if (status === 'pass') {
                    return (
                      <div style={{ color: token.colorWarning }}>强度：中</div>
                    );
                  }
                  if (status === 'ok') {
                    return (
                      <div style={{ color: token.colorSuccess }}>强度：强</div>
                    );
                  }
                  return (
                    <div style={{ color: token.colorError }}>强度：弱</div>
                  );
                },
              }}
              placeholder={'密码: ant.design'}
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
              ]}
            />
          </>
        </LoginForm>
      </div>
    </ProConfigProvider>
  );
};
